<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        /*
        * * 常见事件：
            1.点击事件：
            - onclick ：单击事件
            - ondblclick : 双击事件

            2.焦点事件：
            - onblur:失去焦点
            - onfocus：元素获得焦点

            3.加载事件：
            - onload：一张页面或一幅图像完成加载

            4.鼠标事件：
            - onmousedown : 鼠标按钮被按下
            - onmouseup : 鼠标按钮被松开
            - onmousemove : 鼠标被移动
            - onmouseout : 鼠标从某元素移开
            - onmouseover : 鼠标移到某元素上

            5.键盘事件
            - onkeydown : 某个键盘按钮被按下
            - onkeyup : 某个键盘按钮被松开
            - onkeypress : 某个键盘按键被按下并松开

            6.选中和改变
            - onchange : 域的内容被改变
            - onselect : 文本被选中

            7.表单事件
            - onsubmit : 确认按钮被点击
            - onreset : 重置按钮被点击
            */


        //2.加载完成事件 onload
        window.onload = function () {
            //1.失去焦点事件
            document.getElementById("user").onblur = function () {
                alert("失去焦点了");
            }

            //3.1绑定鼠标移到元素上事件
            /*document.getElementById("user").onmouseover = function () {
                alert("鼠标来了");
            }*/

            //3.2绑定鼠标点击事件
            /*document.getElementById("user").onmousedown = function (event) {
                //alert("鼠标点了");
                alert(event.button);
            }*/

            //4.键盘事件
            /*document.getElementById("user").onkeydown = function (event) {
                //alert("鼠标点了");
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }*/

            //5.变化事件
            /*document.getElementById("city").onchange = function (event) {
                alert("改变了");
            }*/

            document.getElementById("f").onsubmit = function () {
                var flag = false;
                return flag;
            }

            function checkForm() {
                return false;
            }

        }


    </script>
</head>
<body>
    <input id="user" type="text">
    <select id="city">
        <option>--请选择--</option>
        <option>--北京--</option>
        <option>--长沙--</option>
        <option>--郴州--</option>
    </select>
    <form action="#" id="f">
        <input type="submit" value="提交" onsubmit="checkForm()">
    </form>
</body>

</html>